<!-- 在需要使用的页面 -->
<!-- 注意，页面上很多变量都是程序的代码，自行排除哈。还有全国省市区的数组在下面有显示 -->
<template>
  <div>
    <van-button @click="getAddress()">测试baseurl</van-button>
    <div>name:{{ mapData.name }}</div>
    <br/>
    <div>latng:{{ mapData.latng }}</div>
    <br/>
    <div>addr:{{ mapData.addr }}</div>
    <br/>
    <div>city:{{ mapData.city }}</div>
    <br/>
    <div>module:{{ mapData.module }}</div>


    <a href="http://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=https://baidu.com&key=OB4BZ-D4W3U-B7VVO-4PJWW-6TKDJ-WPB77&referer=myapp">
      <input placeholder="请选择地址" readonly>
    </a>

    <div class="row_one">
      <div class="row_h46">
        <van-icon name="location-o"/>
        事件地址
      </div>
      <div class="row_h46 posr">
        <input style="width:100%" class="row_input border_none"
               @click="getAddress"
               v-model="mapData.name"/>
        <i class="iconfont icon-dingwei rightIcon"></i>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mapData: {
        name: '',
        latng: '',
        addr: '',
        city: '',
        module: '',
      }
    }
  }
  ,
  mounted() {
    var urlData = this.$route.query // 获取路径上的参数
    // console.log('urlData', urlData);
    if (urlData.module == 'locationPicker') {//防止其他应用也会向该页面post信息，需判断module是否为'locationPicker'
      console.log('location', urlData);
      this.mapData.name = urlData.name;
      this.mapData.latng = urlData.latng;
      this.mapData.addr = urlData.addr;
      this.mapData.city = urlData.city;
      this.mapData.module = urlData.module;
    }
  }
  ,
  methods: {
    getAddress() {
      window.location.href = "https://apis.map.qq.com/tools/locpicker?search=1&type=0&backurl=http://4663588nl3.zicp.vip/map&key=LUXBZ-T2FWJ-Z77FH-KNNWX-BAVH6-ATBE2&referer=kk"
    }
  }
}
</script>

<style scoped lang="less">
.row_h46 {
  height: 46px;
  line-height: 46px;
  text-align: left;
}
</style>
